<!--* 视频选择组件-->
<!--* 1.dialog的显示: :visible.sync-->
<!--* 2.选择图片后的事件: @choose, 选择后会将图片的所有数据返回-->
<!--* <hj-choose-video :visible.sync="visible"            // 弹框显示控制  (必填)-->
<!--*                @choose="chooseImg"                // 选择图片后的回调方法  (必填)-->
<!--*                @close="visible=false"             // 注意这个visible和:visible.sync中的变量相同, 其实就是为了设置为false-->
<!--*                ></hj-choose-video>-->
<template>
  <div>
    <el-dialog title="选择视频资源" :visible.sync="videoDialog" width="840px" :close-on-click-modal="false" top="1vh" :append-to-body="true" @close="close">
      <div class="choose-image-search-container" style="margin-bottom: 10px;">
        <el-input v-model="searchForm.fileName" placeholder="请输入文件名" clearable style="width: 160px;" />
        <el-input v-model="searchForm.extensionName" placeholder="请输入扩展名" clearable style="width: 160px;" />
        <el-select v-model="searchForm.classificationId" placeholder="请选选择分组" transfer="true" :popper-append-to-body="false" :clearable="true" @change="getList({pageNo: 1})">
          <el-option
            v-for="item in baseClassifyList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
        <el-button type="primary" icon="el-icon-search" size="medium" @click="searchImage">搜索</el-button>
        <el-button type="primary" icon="el-icon-search" size="medium" @click="navToUploadVideo">去上传</el-button>
      </div>
      <div class="choose-image-list">
        <div v-for="item in list" :key="item.id" class="choose-image-item">
          <video class="choose-image" :src="cfg.imageDomain + item.path" alt="" :poster="item.poster ? cfg.imageDomain + item.poster : cfg.imageDomain + item.path + '?vframe/jpg/offset/0/w/0/h/0'" controls @click="choose(item)" />
          <div class="choose-image-name">
            <span>{{ item.fileName }}</span>
          </div>
        </div>
      </div>
      <div>
        <el-pagination
          style="text-align: right"
          layout="prev, pager, next"
          :current-page="pageNo"
          :limit.sync="pageSize"
          :total="total"
          @current-change="pageChange"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import request from '@/utils/request'

export default {
  name: 'ChooseVideo',
  components: { },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    autoCropWidth: {
      type: Number,
      default: 9999
    },
    autoCropHeight: {
      type: Number,
      default: 9999
    },
    fixed: {
      type: Boolean,
      default: false
    },
    fixedBox: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      videoDialog: false,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      list: [],
      fileName: '',
      fileType: '',
      uploadFileName: '',
      url: '',
      fileSize: '',
      extensionName: '',
      type: '',
      searchForm: {
        fileName: '',
        extensionName: '',
        sourceType: '',
        classificationId: ''
      },
      baseClassifyList: ''
    }
  },
  watch: {
    visible: function(val) {
      this.getList({
        pageNo: this.pageNo
      });
      this.videoDialog = val;
    }
  },
  mounted: function() {
    this.getBaseClassify();
  },
  methods: {
    getBaseClassify: function() {
      var _this = this;
      request({
        url: '/system/sysBaseParam/selectValueByUnicode?unicode=VIDEO_CLASSIFICATION',
        method: 'post'
      }).then(res => {
        _this.baseClassifyList = res.data.split(',');
      })
    },
    getList: function(param) {
      var _this = this;
      this.pageNo = param.pageNo;
      request({
        method: 'post',
        url: '/multiMediaLib/videoResLib/getPageList',
        data: {
          pageNo: param.pageNo,
          pageSize: 10,
          ...this.searchForm
        }
      }).then(function(res) {
        console.log(res);
        const data = res.data;
        _this.total = data.total;
        const rows = data.rows;
        for (let i = 0; i < rows.length; i++) {
          rows[i].fileName = rows[i].fileName.length > 14 ? rows[i].fileName.substr(0, 14) + '...' : rows[i].fileName
        }
        _this.list = rows;
      });
    },
    pageChange: function(pageNo) {
      this.pageNo = pageNo;
      this.getList({
        pageNo: pageNo
      });
    },
    searchImage: function() {
      this.getList({
        pageNo: 1,
        fileName: this.fileName,
        extensionName: this.extensionName,
        fileType: this.fileType
      });
    },
    choose: function(file) {
      this.$emit('update:visible', false);
      this.$emit('choose', file);
    },
    close: function() {
      this.$emit('update:visible', false);
      this.$emit('close');
    },
    navToUploadVideo() {
      this.$router.push('/res/resVideoLibList')
    }
  }
}
</script>
